<template>
  <div>
    <template v-if="policyList.length > 0">
      <div class="policy_info" v-for="(item, index) in policyList" :key="index">
        <div class="top">
          <span class="policy-line"></span>
          <div class="policy-title">
            <span class="left111">{{ item.productName }}</span>
            <span style="color: #25ce2c" v-if="policyRadio == 1">{{ item.stateType }}</span>
            <span class="green" v-else-if="policyRadio == 2">{{ item.stateType }}</span>
            <span class="red" v-else>{{ item.stateType }}</span>
          </div>
        </div>
        <div class="policy-main">
          <p class="grey">保单号：{{ item.policyNo }}</p>
          <p class="policy-time">
            <span>生效日期：{{ item.cvalidate }}</span>
            <span>保障期限：{{ item.insuYear }}年</span>
          </p>
          <p class="policy-time">
            <span>交费年限：{{ item.payYears }}年</span>
            <span>年费保费：{{ item.prem }}元</span>
          </p>
        </div>
      </div>
    </template>
    <template v-else>
      <el-empty description="暂无数据"></el-empty>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    policyList: {
      type: Array,
      default: () => [],
    },
    policyRadio: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {

    }
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.policy_info {
  background: #F8F8F8;
  padding: 17px 21px 17px 0;
  line-height: 22px;
  color: #505050;
  margin-top: 16px;

  .top {
    display: flex;

    .policy-line {
      width: 4px;
      background: #082aff;
      margin-right: 17px;
    }

    .policy-title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .left111 {
        font-size: 16px;
        font-weight: 500;
        color: #2A2A2A;
      }
    }
  }

  .policy-main {
    padding-left: 20px;

    .policy-time {
      display: flex;

      span {
        flex: 1;
      }
    }
  }

  .grey {
    color: #999999;
  }

  .red {
    color: #F23031;
  }

  .green {
    color: #14D595;
  }
}
</style>
